<template>
  <div>
    <el-table
      :data="readCollectionRead"
      style="width: 100%">
      <el-table-column
        prop="heat"
        label="热度"
        width="180">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.heat/100"></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="发布时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topic"
        label="标题"
      >
      </el-table-column>
      <el-table-column
        prop="authName"
        label="作者"
      >
      </el-table-column>
      <el-table-column
        prop="commentNum"
        label="评论数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="loveNum"
        label="点赞数"
        width="80">
      </el-table-column>
      <el-table-column
        label="操作"
        width="80">
        <template slot-scope="scope">
          <i class="el-icon-view" style="color: #20a0ff" @click="listen(scope.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
      style="text-align: right;margin-right: 120px"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getAllReadCollection} from "@/api/collection";
import comment from "@/components/soulListen/comment";

export default {
  name: "collectionRead",
  created() {
    this.getAllCollectionRead()
  },
  data() {
    return {
      total: undefined,
      page: 0,
      size: 10,
      readCollectionRead: []
    }
  },
  methods: {
    getAllCollectionRead() {
      getAllReadCollection(this.page, this.size).then(res => {
        this.readCollectionRead = res.body.data.dtos
        this.total = res.body.data.total
      })
    },
    handleCurrentChange(page) {
      this.page = page-1
      this.getAllCollectionRead()
    },
    listen(id) {
      this.$router.push({name:'detailSoulSharing',query: {readId: id}})
    }
  }
}
</script>

<style scoped>

</style>
